<template>
      <!-- 局部导航栏 -->
   <swiper :options='swiperOption'>
        <!-- <swiper> -->
       <swiper-slide v-for="(page,index) of page" :key='index'>
        <ul class="local_nav">
        <li v-for="item of page" :key="item.id">
            <a href="#" :title="item.text">
              <div class="local_nav_icon">
                  <img :src="item.url" alt="">
              </div>
                <span>{{item.text}}</span>
            </a>
        </li>
    </ul>
    </swiper-slide>
   </swiper>
</template>

<script>
export default {
 data(){
     return{
         swiperOption:{
           autoplay:false//不要自动播放
          },
         arr:[{
             id:'1',
             url:'https://s.qunarzz.com/homenode/images/touchheader/piao.png',
             text:"酒店"
         },{
              id:'2',
             url:'https://s.qunarzz.com/homenode/images/touchheader/flight.png',
             text:"机票"
         },
         {
              id:'3',
             url:'https://s.qunarzz.com/homenode/images/touchheader/train.png',
             text:"火车票"
         },{
              id:'4',
             url:'https://s.qunarzz.com/homenode/images/touchheader/package.png',
             text:"度假"
         },{
              id:'5',
             url:'https://s.qunarzz.com/homenode/images/touchheader/piao.png',
             text:"景点"
         },{
             id:"6",
             url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598075804896&di=3ab92090cd1255ab1c33799366b7f727&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F85%2F63%2F597030ad77f74_610.jpg",
            text:"国外旅游"
         }]
     }
 },
 computed: {
     page(){
         const pages=[] //是个二维数组一页对应一个数组
         this.arr.forEach((item,index)=>{
             const page=Math.floor(index/5)
             if(!pages[page]){
                 pages[page]=[];
                //有俩层的话就创建新数组
             }
             pages[page].push(item)
         })
         return pages
     },
 },
}
// import $ from 'jquery'
// $(function(){
//     $("[class^=local_nav_icon]").each((index,item)=>{
//         $(item).css({
//             'background-position':"0  "+(index%5)*-0.64+"rem"
//         })
//     })
// })
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/ellipsis.styl'
.local_nav
    width 100%
    overflow hidden
    height 0
    padding-bottom 20%

    // justify-content space-around
    li

        display inline-block
        width 20%
        margin-top .3rem
    a
        display block
        text-align center
        color black
        ellipsis()
        // overflow hidden
        // white-space nowrap
        // text-overflow ellipsis
        [class^='local_nav_icon']
            width 0.64rem
            height 0.64rem
            margin-left 50%
            transform translateX(-50%)
            margin-bottom .2rem
            img 
                width 100%
                height 100%
        span 
            font-size:.24rem


            
        



</style>